<template>
  <div class="bigBox">
    <div class="top">思想道德风险</div>
    <div class="box">
      <div class="top1">
        <div class="left">
          <span>标题：</span>
          <el-input v-model="input1" class="first"></el-input>
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择" class="second">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span>创建/更新日期：</span>
          <el-date-picker v-model="value2" type="date" placeholder="选择日期" class="third"></el-date-picker>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </div>
        <div class="right">
          <el-button type="primary">+新建</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border stripe :cell-style="changeCellStyle" :header-cell-style="rowClass">
        <el-table-column type="index" label="序号" width="52px" align="center"></el-table-column>
        <el-table-column prop="name" label="标题" ></el-table-column>
          <el-table-column prop="name" label="来源" width="240px" align="center"></el-table-column>
        <el-table-column prop="date" label="创建/更新日期" align="center" width="240px"></el-table-column>
        <el-table-column prop="status" label="是否上架" align="center" width="140px">
          <template slot-scope="scope">
            <el-switch v-model="value3" active-color="#1677FF" inactive-color="#E8E8E8"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="223px">
           <el-button type="primary" size="small">编辑</el-button>
              <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background-color="#3D7FFF"
      :current-page="currentPage4"
      :page-sizes="[2, 5,10]"
      :page-size="100"
      layout="total,  prev, pager, next, sizes,jumper"
      :total="400">
    </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      value: "全部",
      value2: "",
      value3:true,
      currentPage4: 4,
      options: [
        {
          value: "选项1",
          label: "全部"
        }
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
         {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        },
          {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      changeCellStyle (row, column, rowIndex, columnIndex) {
   if(row.column.label === "标题"){
       return 'padding-left: 35px'  // 修改的样式
   }else{
       return ''
   }
},
rowClass({row, column, rowIndex, columnIndex}){
    if(rowIndex === 0 && columnIndex ===1){ //指定坐标
        return 'padding-left:35px'
    }else{
        return ''
    }
}
  }
};
</script>
<style lang="less" scoped>
.top {
  width: 1580px;
  height: 68px;
  line-height: 68px;
  padding-left: 24px;
  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
}
.box {
  width: 1580px;
  height: 880px;
  padding: 0 24px;
 
}
.top1 {
  width: 1580px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  margin-top: 19px;
}
/deep/.left .el-input__inner {
  width: 154px;
  height: 36px;
}
/deep/.el-input {
  width: 154px;
}
.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}
.el-button {
  width: 52px;
  height: 36px;
  padding: 0;
}
.first,
.second,
.third {
  margin-right: 20px;
}
/deep/.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-left:810px;
  margin-top: 46px;
}
</style>